<!doctype html>
<html>
  <head>
    <title>Drawing - screenshots gallery</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1.0,width=device-width" />
    <meta name="description"
          content="Drawing is a simple image editor for Linux, inspired by Paint" />
    <link rel="stylesheet" href="example.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
  </head>

  <body>
    <header>
      <div class="header-box">
        <div class="responsive-row">
          <div class="col66">
            <h1>Drawing</h1>
            <p>Simple image editor for Linux</p>
            <hr />
            <div class="responsive-row nav-row">
              <div class="col33 nav-item primary-nav-item">
                <a href="./index.html">Website homepage</a>
              </div>
              <div class="col33 nav-item">
                <a href="https://github.com/maoschanz/drawing">Source code (GPL3)</a>
              </div>
              <div class="col33 nav-item">
                <a href="https://paypal.me/maoschannz">Paypal donations</a>
              </div>
            </div>
          </div>
          <div class="col33">
            <img class="header-icon"
              src="https://raw.githubusercontent.com/maoschanz/drawing/master/data/icons/hicolor/128x128/apps/com.github.maoschanz.drawing.png"
               alt="icon" />
          </div>
        </div>
      </div>
    </header>
    <main>
      <h3>Screenshots gallery</h3>
      <hr />

      <h2>GNOME and Budgie</h2><!-- **************************************** -->

      <div class="responsive-row">
        <div class="col50">
          <img alt="screenshot" class="zoomable-img-100"
               src="screenshots/1.0/gnome_menu.png" />
          <p>The primary menu opened (version 1.0.0)</p>
        </div>
        <div class="col50">
          <img alt="screenshot" class="zoomable-img-100"
               src="screenshots/1.0/gnome_selection.png" />
          <p>The "selection" tool and its menu (version 1.0.0)</p>
        </div>
      </div>

      <div class="responsive-row">
        <div class="col50">
          <img alt="screenshot" class="zoomable-img-100"
               src="screenshots/1.0/gnome_new.png" />
          <p>The "new image" menu opened while the canvas is being scaled up (version 1.0.0)</p>
        </div>
        <div class="col50">
          <img alt="screenshot" class="zoomable-img-100"
               src="screenshots/1.0/gnome_tools_preview.png" />
          <p>The thumbnail preview, showing various shapes (version 1.0.0)</p>
        </div>
      </div>

      <div class="responsive-row">
        <div class="col50">
          <img alt="screenshot" class="zoomable-img-100"
               src="screenshots/0.8/gnome_zoom_preview.png" />
          <p>Zooming on the image (version 0.8.0)</p>
        </div>
        <div class="col50">
          <img alt="screenshot" class="zoomable-img-100"
               src="screenshots/0.8/gnome_saturate.png" />
          <p>Change the saturation (version 0.8.0)</p>
        </div>
      </div>

      <div class="responsive-row">
        <div class="col50">
          <img alt="screenshot" class="zoomable-img-100"
               src="screenshots/0.8/gnome_colors.png" />
          <p>Select a color (version 0.8.0)</p>
        </div>
        <div class="col50">
          <img alt="screenshot" class="zoomable-img-100"
               src="screenshots/1.0/gnome_text.png" />
          <p>Add text to a picture (version 1.0.0)</p>
        </div>
      </div>

      <h2>Traditional-looking environments</h2><!-- ************************ -->

      <div class="responsive-row">
        <div class="col50">
          <img alt="screenshot" class="zoomable-img-100"
               src="screenshots/0.6/plasma_global.png" />
          <p>Integration with KDE Plasma global menu-bar (version 0.6.1)</p>
        </div>
        <div class="col50">
          <img alt="screenshot" class="zoomable-img-100"
               src="screenshots/0.4/cinnamon.png" />
          <p>Both the menubar and the toolbar (version 0.4.8)</p>
        </div>
      </div>
      <p>It's also possible to use only the toolbar, or only the menubar. The
      user interface you will get by default depends on your desktop
      environment, but you can change that in the app preferences.</p>
      <div class="responsive-row">
        <div class="col50">
          <img alt="screenshot" class="zoomable-img-100"
               src="screenshots/0.4/mate_scale.png" />
          <p>Scaling the picture, with the menubar and the toolbar with colorful
          icons (version 0.4.7)</p>
        </div>
        <div class="col50">
          <img alt="screenshot" class="zoomable-img-100"
               src="screenshots/0.6/cinnamon_scale.png" />
          <p>Toolbar only, scaling the picture on Cinnamon (version 0.6.0)</p>
        </div>
      </div>

      <h2>elementaryOS</h2><!-- ******************************************** -->

      <div class="responsive-row">
        <div class="col50">
          <img alt="screenshot" class="zoomable-img-100"
               src="screenshots/0.6/elementary_save_as.png" />
          <p>The elementaryOS design guidelines (version 0.6.0)</p>
        </div>
        <div class="col50">
          <img alt="screenshot" class="zoomable-img-100"
               src="screenshots/0.8/elementary_labels.png" />
          <p>Using the primary menu to show the tools names (version 0.8.0)</p>
        </div>
      </div>

      <h2>Linux smartphones</h2><!-- *************************************** -->
      <div class="responsive-row">
        <div class="col33">
          <p>With the default "GNOME" layout, the window can fit in the narrow
          screen of a smartphone such as Purism's Librem 5 or the PinePhone.</p>
          <hr />
          <p>Here is a <a href="https://puri.sm/posts/app-showcase-drawing/">
          video showcase</a> of a few features (from version 0.6.5), using the
          Librem 5.</p>
        </div>
        <div class="col33">
          <img alt="screenshot" class="zoomable-img-100"
               src="screenshots/1.0/librem_menu.png" />
          <p>When features can't fit in the headerbar, they are available from
          the primary menu (version 1.0.0)</p>
        </div>
        <div class="col33">
          <img alt="screenshot" class="zoomable-img-100"
               src="screenshots/1.0/librem_options.png" />
          <p>Pencil options menu in a window resized to fit a Librem 5 screen.
          (version 1.0.0)</p>
        </div>
      </div>
      <!-- end of the page-->
    </main>
    
    <header>
      <!--it's a footer but it has the same css as the header so here we are-->
      <div class="header-box">
        <div class="responsive-row nav-row">
          <div class="col33 nav-item primary-nav-item">
            <a href="./index.html">Website homepage</a>
          </div>
          <div class="col33 nav-item">
            <a href="https://github.com/maoschanz/drawing">Source code (GPL3)</a>
          </div>
          <div class="col33 nav-item">
            <a href="https://paypal.me/maoschannz">Paypal donations</a>
          </div>
        </div>
      </div>
    </header>

  </body>
</html>
